<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import Prism from "prismjs"; //
import "prismjs/themes/prism-tomorrow.min.css"; //高亮主题
// import "prismjs/plugins/toolbar/prism-toolbar.min.js"; //工具箱
// import "prismjs/plugins/toolbar/prism-toolbar.min.css"; //工具箱的样式
// import "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"; //复制插件
// import "prismjs/plugins/line-numbers/prism-line-numbers.min.js"; //行号插件
// import "prismjs/plugins/line-numbers/prism-line-numbers.min.css"; //行号插件的样式
defineOptions({
  name: "Server"
});

const htmls = ref(`
  <div>
    <p>这是一段html代码</p>
  </div>`);

onMounted(() => {
  Prism.highlightAll(); //这个是核心插件提供的方法，用于代码高亮
});
</script>

<template>
  <div>
    <!-- 注意这里不要用code标签 否则会把你辛苦添加的换行符去掉 -->
    <!-- <pre v-html="jsonStr" /> -->
    <!-- <pre style="padding-left: 0">
    <code class="language-shell line-numbers" data-prismjs-copy="复制">
    function getImageUrl(name: string) {
          return new URL(`/tool/${name}.png`, import.meta.url).href;
      }
    </code>
  </pre> -->
  </div>
</template>

<style lang="scss" scoped></style>
